<template>
    <div class="details">
        <div class="wrapper">
            <h2 class="name">{{ data.name }}</h2>
            <el-row>
                <el-col :span="16">
                    <img class="img" :src="data.pic"/>
                </el-col>
                <el-col :span="8">
                    <h2 class="oth">评分：{{data.score}}</h2>
                    <div>
                        <h2 class="oth">景区地址：{{data.address}}</h2>
                    </div>
                    <div>
                        <h2 class="oth">建议游玩时间：{{data.playTime}}</h2>
                    </div>
                </el-col>
            </el-row>

            <div>
                <h2 class="oth">景区简介</h2>
                <span class="con">{{data.introduction}}</span>
            </div>
            <div>
                <h2 class="oth">景区票价</h2>
                <span class="con">{{data.price}}</span>
            </div>
        </div>
        <div class="wrapper">
            <h2 class="name">用户评价</h2>
            <el-button type="primary" style="position: relative;left: 99%" @click="handleAdd()">我要评价</el-button>
            <div class="project" v-for="item in eva" :key="item.id">
                <div class="right">
                    <div class="date" style="font-size: 18px;padding-top: 1px">评价内容：{{item.content}}</div>
                    <div class="date" style="padding-top: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评价人：{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评价时间：{{item.createTime}}
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <h2 class="name">当地特色小吃</h2>
            <div class="art">
                <el-row :gutter="20">
                    <div
                            class="left"
                            v-for="item in findFoods"
                            :key="item.id"
                    >
                        <el-col :span="6"
                        >
                            <div class="grid-content bg-purple">
                                <div class="pic"><img width="100%" :src="item.pic"/></div>
                                <div class="text">
                                    <div class="name2">小吃名：{{ item.name }}</div>
                                    <div class="name2">城市：{{ item.city }}</div>
                                </div>
                                <div class="top"></div>
                            </div
                            >
                        </el-col>
                    </div>
                </el-row>
                <div class="page">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage"
                            :page-sizes="[8, 12, 16]"
                            :page-size="page.size"
                            layout="total, sizes, prev, pager, next"
                            :total="page.total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <h2 class="name">旅游套餐</h2>
            <div class="project" v-for="item in packages" :key="item.id" @click="goDetail(item.id)">
                <div class="left">
                    <img
                            width="100%"
                            :src="item.pic"
                            alt=""
                    />
                </div>
                <div class="right">
                    <div class="intro" style="font-weight: bold">套餐名：{{item.name}}</div>
                    <div class="intro">套餐类型：{{item.type}}</div>
                    <div class="intro">套餐详情：{{item.content}}</div>
                    <div class="intro">套餐价格：{{item.price}}元</div>
                </div>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="评分" prop="score">
                    <el-select v-model="form.score"
                               placeholder="请选择评分"
                               clearable
                               size="small">
                        <el-option value="1" label="1">1</el-option>
                        <el-option value="2" label="2">2</el-option>
                        <el-option value="3" label="3">3</el-option>
                        <el-option value="4" label="4">4</el-option>
                        <el-option value="5" label="5">5</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评价内容" prop="content">
                    <el-input v-model="form.content" type="textarea" placeholder="请输入评价内容"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>
    import {getScenicDetail, getList, addEvaluate, getToken, findFood, listPackages} from "@/utils/request";

    export default {
        name: "ScenicDetail",
        data() {
            return {
                id: "",
                data: {},
                findFoods: [],
                eva: [],
                packages: [],
                open: false,
                title: '',
                city: '',
                form: {
                    sid: "",
                    content: '',
                    scenic: '',
                    score: ""
                },
                scenic: '',
                page: {
                    size: 8,
                    currentPage: 1,
                    total: 0,
                },
                datas: {
                    pageNum: 1,
                    pageSize: 8,
                    city: '',
                }
            };
        },
        methods: {
            handleAdd() {
                this.open = true;
                this.title = "添加景点评价";
            },
            findPageQueryFood() {
                findFood(this.datas).then((res) => {
                    if (res.code == 200) {
                        this.findFoods = res.rows;
                        this.page.total = res.total;
                    } else {
                        this.$message({
                            type: "error",
                            message: this.message,
                        });
                    }
                });
            },
            findPackage() {
                const datas={
                    pageNum:1,
                    pageSize:100,
                    sid:this.id
                }
                listPackages(datas).then((res) => {
                    if (res.code == 200) {
                        this.packages = res.rows;
                    } else {
                        this.$message({
                            type: "error",
                            message: this.message,
                        });
                    }
                });
            },
            handleSizeChange(val) {
                this.page.size = val;
                this.queryParams.pageNum = val;
                this.findPageQueryFood();
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.queryParams.pageNum = val;
                this.findPageQueryFood();
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        let a = undefined;
                        if (a !== getToken()) {
                            addEvaluate(this.form.score, this.form.content, this.id, this.scenic).then(response => {
                                this.$message({
                                    type: "success",
                                    message: "评价成功",
                                });
                                this.open = false;
                                this.findDetails();
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: "请先登录",
                            });
                        }

                    }
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
            },
            // 查询项目的详细信息
            findDetails() {
                // 数据交互
                getScenicDetail(this.id).then((res) => {
                    if (res.code == 200) {
                        this.data = res.data;
                        this.scenic = res.data.name;
                        this.datas.city = res.data.city
                        this.findPageQueryFood()
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                        });
                    }
                });
            },
            getEvaList() {
                getList(this.id).then(res => {
                    if (res.code == 200) {
                        res.data.forEach(i => {
                            i.name = i.name.substring(0, 1) + "****"
                        })
                        this.eva = res.data;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                        });
                    }
                })
            },
            goDetail(id){
                // 跳转到详情页面，并且传递id
                this.$router.push({path:'/packageDetail',query:{id:id}})
            },

        },
        created() {
            // 在页面加载的时候拿到数据
            // 拿到从上一个页面传过来的id值
            this.id = this.$route.query.id;
            this.findDetails();
            this.getEvaList();
            this.findPackage()
        },
    };
</script>

<style scoped lang='scss'>
    .details {
        .wrapper {
            .name {
                text-align: center;
                font-size: 30px;
                color: #0189ec;
            }
            .img {
                width: 800px;
                height: 500px;
            }
            .oth {
                /*text-align: center;*/
                font-size: 30px;
            }
            .con {
                font-size: 18px;
            }
        }
    }

    .name2 {
        text-align: center;
    }

    .titlee {
        font-weight: bold;
    }

    .intro {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        padding-top: 20px;
    }

    .wrapper {
        width: 1240px;
        .title {
            font-size: 20px;
            line-height: 80px;
            border-bottom: 1px solid #f4f4f4;
        }
        .project {
            display: flex;
            padding: 1em 0;
            border-bottom: 1px solid #f4f4f4;
            .left {
                width: 300px;
                height: 200px;
                background-color: #f4f4f4;
                border-radius: 5px;
                overflow: hidden;
            }
            .right {
                flex: 1;
                padding: 0 2em;
                .name {
                    font-weight: bolder;
                    font-size: 1em;
                }
                .date {
                    margin: 1em 0;
                }
            }
        }
    }
</style>
